<template>
  <el-dialog :model-value="show" title="新增作品" width="450px" :close-on-click-modal="false" @close="closeDialog">
    <el-form ref="vFormRef" :model="vForm">
      <el-form-item label="作品名称" prop="Title" :rules="{ required: true, message: '作品名称必填' }">
        <el-input v-model="vForm.Title"></el-input>
      </el-form-item>
      <el-form-item label="作品封面">
        <div v-if="mediaData" class="c-box">
          <el-image :src="mediaData.UniqueKeyPreview" class="c-box-img"></el-image>
          <div class="c-box-del" @click="mediaData = undefined">
            <el-icon :size="12">
              <CloseBold />
            </el-icon>
          </div>
        </div>
        <div v-else class="se-hdl" @click="isShowMediaDialog = true">
          <el-icon :size="20">
            <Plus></Plus>
          </el-icon>
        </div>
      </el-form-item>
      <el-form-item label="全景素材">
        <draggable class="mt-ls" v-model="materialList" group="people" @start="drag = true" @end="drag = false"
          item-key="UUID">
          <template #item="{ element, index }">
            <div class="mt-ls-it">
              <el-image class="mt-ls-img" :src="element.ThumbPreview"></el-image>
              <div class="mt-ls-ft">
                <input v-model="element.Title" type="text" class="mt-ls-in" />
                <el-icon :size="12" class="mt-ls-icon" @click="materialList.splice(index, 1)">
                  <Delete />
                </el-icon>
                <el-icon :size="12" class="mt-ls-icon v-ml-5">
                  <View />
                </el-icon>
              </div>
            </div>
          </template>
          <template #footer>
            <div class="se-hdl" @click="isShowMaterialDialog = true">
              <el-icon :size="20">
                <Plus></Plus>
              </el-icon>
            </div>
          </template>
        </draggable>
      </el-form-item>
      <el-form-item label="显示状态">
        <el-radio v-model="vForm.Status" :label="1">启用</el-radio>
        <el-radio v-model="vForm.Status" :label="2">禁用</el-radio>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" @click="closeDialog">取 消</el-button>
        <el-button ref="btn" type="primary" size="small" @click="doSubmit"> 确 定 </el-button>
      </div>
    </template>
  </el-dialog>
  <MeterialDialog v-if="isShowMaterialDialog" v-model:show="isShowMaterialDialog" @select="handleSelectMaterial">
  </MeterialDialog>
  <MediaDialog v-if="isShowMediaDialog" :single="true" v-model:show="isShowMediaDialog" @select="handleSelectMedia">
  </MediaDialog>
</template>

<script setup lang="ts">
import draggable from 'vuedraggable';
import apiWorks from '@/api/modules/works';
import MeterialDialog from '@/pages/Material/MeterialDialog.vue';
import MediaDialog from '@/pages/Media/MediaDialog.vue';
import { ref, reactive } from 'vue';
import { v4 as uuidv4 } from 'uuid';
import { Plus, Delete, View, CloseBold } from '@element-plus/icons-vue';
import { type FormInstance, ElMessage } from 'element-plus';
import type { commitParams } from '@/api/modules/works';
import type { ListForPageDataItem as MediaListForPageDataItem } from '@/api/modules/uploader';
import type { ListForPageDataItem as MaterialListForPageDataItem } from '@/api/modules/material';
type MaterialListForPageDataItemEx = MaterialListForPageDataItem & { UUID: string };

defineProps({
  show: Boolean,
});

const emit = defineEmits(['update:show', 'success']);

const drag = ref(false);
const doSubmitLoading = ref(false);
const isShowMaterialDialog = ref(false);
const isShowMediaDialog = ref(false);
const materialList = ref<MaterialListForPageDataItemEx[]>([]);
const mediaData = ref<MediaListForPageDataItem>();
const vFormRef = ref<FormInstance>();
const vForm: commitParams = reactive({
  Cover: '',
  SceneParam: { MaterialId: [] },
  Status: 1,
  Title: '',
});

const closeDialog = () => {
  emit('update:show', false);
};

const handleSelectMaterial = (data: MaterialListForPageDataItemEx[]) => {
  data.forEach((item) => (item.UUID = uuidv4()));
  materialList.value = materialList.value.concat(data);
};

const handleSelectMedia = (data: MediaListForPageDataItem[]) => {
  mediaData.value = data[0];
};

const doSubmit = async () => {
  doSubmitLoading.value = true;
  try {
    if (!vFormRef.value) return;
    await vFormRef.value.validate();
    vForm.SceneParam.MaterialId = materialList.value.map((item) => item.ID);
    vForm.Cover = mediaData.value ? mediaData.value.UniqueKeyPreview : '';
    await apiWorks.commit(vForm);
    ElMessage.success('新增成功');
    emit('success')
    closeDialog();
  } catch (e) {
    console.error(e);
  }
  doSubmitLoading.value = false;
};
</script>

<style scoped>
.se-hdl {
  width: 98px;
  height: 98px;
  border: 1px dashed #ddd;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.mt-ls {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.mt-ls-it {
  position: relative;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.mt-ls-img {
  display: block;
  width: 100%;
  height: 100%;
}

.mt-ls-ft {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 4px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.mt-ls-in {
  flex: 1;
  margin-right: 5px;
  min-width: 0;
}

.mt-ls-icon {
  cursor: pointer;
}

.c-box {
  width: 98px;
  height: 98px;
  border: 1px solid #ddd;
  position: relative;
}

.c-box-del {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  top: 0;
  right: 0;
  cursor: pointer;
}

.c-box-img {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
</style>
